<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>订单详情</title>
    <link rel="stylesheet" href="../css/personal_center.css">
    <link rel="stylesheet" href="../css/head_daohang.css">
    <link rel="stylesheet" href="../layui/css/layui.css">
    <script src="../js/jquery-3.6.0.min.js"></script>
</head>
<body>
    <!-- 主要布局范围 -->
    <div class="main">
        <!-- 头部导航栏 -->
        <div class="main">
          <!-- 头部导航栏 -->
          <div id="head">
            <div class="layui-col-md2">
              <div class="grid-demo">logo</div>
            </div>
            <div class="layui-col-md1">
              <div class="grid-demo head-demo"><a href="../head_page/Carefree_first_page.html" class="head-color">首页</a></div>
            </div>
            <div class="layui-col-md1">
              <div class="grid-demo head-demo"><a href="../vehicle/vehicle_screening.html" class="head-hover word-1">自驾租车</a></div>
            </div>
            <div class="layui-col-md1">
              <div class="grid-demo head-demo"><a href="../long_time_older/long_time.html" class="head-hover word-1">长租专区</a></div>
            </div>
            <div class="layui-col-md1">
              <div class="grid-demo head-demo"><a href="../Offline_outlets/Car-search.html" class="head-hover word-1">车型查询</a></div>
            </div>
            <div class="layui-col-md1">
              <div class="grid-demo head-demo"><a href="../Offline_outlets/Business_outlets.html" class="head-hover word-1">营业网点</a></div>
            </div>
            <div class="layui-col-md1">
              <div class="grid-demo head-demo"><a href="" class="head-hover word-1">会员专区</a></div>
            </div>
            <div class="layui-col-md3">
              <div class="grid-demo head-demo1">
                <i class="login-icon"></i>
                <a href="../login/login.html"  class=" head-color">登录/注册</a>
              </div>
              <div class="tel">
                <i class="tel-icon"></i>
                  <span class="tel-num">110-119-1111</span>
              </div>
            </div>
          </div>
        <!-- 面包屑 -->
        <div class="crumbs">
            <div class="crumbs-bd">当前位置: <a href="personalCenter.html">个人中心</a> ><a href="personalCenter-MyOrler.html">我的订单</a>  > 订单详情</div>
        </div>
        <!-- 主要内容 -->
        <div class="content">
            <div class="content-bd">
                <!-- 左侧导航栏 -->
                <div class="col-sub">
                    <ul> 
                        <li class="title">订单信息</li>
                        <li class="after"><a href="personalCenter-MyOrler.html">我的订单</a></li>
                        <li class="text"><a href="personalCenter-OtherOrler.html">他人代订</a></li>
                        <li class="title">会员信息</li>
                        <li class="text"><a href="">会员优惠</a></li>
                        <li class="text"><a href="">会员特权</a></li>
                        <li class="text"><a href="">会员积分</a></li>
                        <li class="title">我的钱包</li>
                        <li class="text"><a href="personalCenter-AccountBalance.html">账户余额</a></li>
                        <li class="text"><a href="personalCenter-Voucher.html">我的代金卷</a></li>
                        <li class="text"><a href="personalCenter-DiscountCode.html">我的优惠编码</a></li>
                        <li class="title">租赁记录</li>
                        <li class="text"><a href="personalCenter-LeaseCar.html">租赁车型</a></li>
                        <li class="title">个人资料</li>
                        <li class="text"><a href="personalCenter-UserInformation.html">用户信息</a></li>
                        <li class="text" onclick="return confirm('即将返回登录界面，确定吗？');"><a href="../login/login.html">账户注销</a></li>                    </ul>
                </div>
                <!-- 主要信息栏 -->
                <div class="col-main">
                  <div class="success-pay">
                    <h2>已支付</h2>
                    <p>
                        订单号：1205620149
                        <span> | </span>
                        租车人：一般路过卡面来打 
                        <span> | </span>
                        支付方式：在线支付
                        <span> | </span>
                        支付状态：已支付
                    </p>
                    
                  </div>
                  <div class="car-message">
                    <div class="car-picture"><img src="../images/本田缤智.png" alt=""><p>租期 <span>2</span>天</p></div>
                    <div class="car-inmessage">
                        <ul>
                            <p>本田缤智混动沪牌/五厢/自动/1.5T</p>
                            <li><span class="store-title">取车地点</span><span class="store-title">还车地点</span></li>
                            <li><span>取车门店：寒山寺店</span><span>还车门店：寒山寺店</span></li>
                            <li><span>取车时间：2023-01-01 22:30</span><span>还车时间：2023-12-22 22:30</span></li>
                            <li><span>取车地址：苏州苏州市姑苏区和园路197号102室</span><span>还车地址：苏州苏州市姑苏区和园路197号102室</span></li>
                        </ul>
                    </div>
                  </div>
                  <div class="money-message">费用明细</div>
                  <div class="money-message-text">
                    <ul>
                      <li>车辆租赁费及门店服务费 (原价：310.00元，折扣优惠：0.00元) <b>￥<span>310</span></b></li>
                      <li>基本保障服务费 (原价：100.00元，折扣优惠：0.00元)<b>￥<span>100</span></b></li>
                      <li>手续费<b>￥<span>20</span></b></li>
                      <li>优惠折扣<b>￥-<span>0</span></b></li>
                    </ul>
                    <div class="all-money"><label>总计：</label> <b>￥<span>430</span></b></div>
                    <div class="payed"><label>已支付：</label> <b>￥<span>430</span></b></div>
                  </div>
                </div>
            </div>
        </div>
        <!-- 尾部 -->
        <div class="footer">
            <div class="footer-box">
                <div class="footer-left">
                    <p>
                        <span>关于无忧</span> |
                        <span>移动客户端</span> |
                        <span>帮助中心</span> |
                        <span>建议专区</span> |
                        <span>联系我们</span> |
                        <span>友情连接</span> |
                        <span>投诉通道：400-821-1608</span> 
                    </p>
                    <p>
                        <span>Copyright © 2007-2022 苏州无忧信息技术服务有限公司 ICP证：苏B2-20140130|苏ICP备08010394号-1</span>
                    </p>
                </div>
                <div class="footer-right"></div>
            </div>
        </div>
    </div>
    
</body>
</html>